<template>
  <div class="mid" id="mid">
    <div class="accountpart" id="jp">
      <div class="left">
        <div class="square"></div>
        <div class="tit">
          <center>MyPetStore</center>
          <br />
          <center>普通会员</center>
        </div>
      </div>
      <div class="right">
        <div class="goal">
          <h1 style="font-family: Youyuan">我的主页</h1>
          <el-descriptions :column="3" border class="description">
            <el-descriptions-item
              label="用户名"
              label-class-name="my-label"
              content-class-name="my-content"
            >
              {{ account.username }}
            </el-descriptions-item>
            <el-descriptions-item label="手机号">
              {{ account.phone }}
            </el-descriptions-item>
            <el-descriptions-item label="居住地">
              {{ account.city }}
            </el-descriptions-item>
            <el-descriptions-item label="语言">
              {{ account.languagePreference }}
            </el-descriptions-item>
            <el-descriptions-item
              label="联系地址"
              :contentStyle="{ 'text-align': 'right' }"
            >
              {{ account.address1 }}
            </el-descriptions-item>
          </el-descriptions>
          <br />
          <el-row ::gutter="24">
            <el-col :span="4" :offset="13">
              <div>
                <el-button type="primary" @click="toEdit()" round
                  >修改信息</el-button
                >
              </div>
            </el-col>
            <el-col :span="4" :offset="2">
              <div><el-button type="info" round>退出登录</el-button></div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "account",
  data() {
    return {
      account: {
        username: "j2ee",
        password: null,
        email: "yourname@yourdomain.com",
        firstName: "ABC",
        lastName: "XYX",
        status: null,
        address1: "901 San Antonio Road",
        address2: "MS UCUP02-206",
        city: "Palo Alto",
        state: "CA",
        zip: "94303",
        country: "USA",
        phone: "555-555-5555",
        favouriteCategoryId: "REPTILES",
        languagePreference: "English",
        listOption: true,
        bannerOption: true,
        bannerName: '<image src="../images/banner_reptiles.gif">',
      },
    };
  },
  methods: {
    toEdit() {
      this.$router.push("/edit");
    },
  },
};
</script>

<style scoped>
@charset "utf-8";

.mid {
  height: 100vh;
  width: 100vw;
  padding-top: 30px;
}

.mid {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.discription {
  opacity: 0;
}
.accountpart {
  width: 1200px;
  height: 600px;
  margin: auto;
  display: flex;
  justify-content: center;
  overflow: hidden;
  opacity: 0.9;
  border-radius: 50px;
  animation: loadbac 1s linear;
  transition: 1s ease 0.2s;
  backdrop-filter: blur(5px);
  box-shadow: 0 0 15px rgb(83, 103, 110);
  background: rgba(71, 142, 175, 0.2);
  border-radius: 15px;
}

.accountpart .left {
  width: 400px;
  height: 100%;
}

.accountpart .left .square {
  width: 250px;
  height: 250px;
  border: 5px solid #336699;
  margin: auto;
  margin-top: 200px;
  border-radius: 30%;
  animation: a1 3s infinite linear;
}

.left .square::before {
  content: "";
  width: 250px;
  height: 250px;
  transform: rotate(30deg);
  border: 5px solid #336699;
  border-radius: 40%;
  position: absolute;
  animation: a2 25s infinite linear;
}

.left .square::after {
  content: "";
  width: 250px;
  height: 250px;
  transform: rotate(60deg);
  border: 5px solid #336699;
  border-radius: 30%;
  position: absolute;
  animation: a2 60s infinite linear;
}

.left .tit {
  position: absolute;
  font-size: 2em;
  margin-left: 110px;
  margin-top: -190px;
  color: #336699;
  z-index: -10;
}

.left .square:hover {
  animation: a1 15s infinite linear;
}

.left .square:hover::before {
  animation: a2 80s infinite linear;
}

.left .square:hover::after {
  animation: a1 50s infinite linear;
}

.accountpart .right {
  width: 800px;
  height: 100%;
}

.accountpart .goal {
  color: #336699;
  width: 500px;
  margin: auto;
  display: flex;
  flex-direction: column;
}

.accountpart .goal h1 {
  font-size: 4em;
  font-weight: bolder;
  line-height: 200px;
}

.accountpart .goal p {
  word-wrap: break-word;
}

.meth .icon:hover {
  transform: scale(1.1);
  cursor: pointer;
}

.icon ul {
  display: none;
  list-style: none;
  margin-top: 30px;
  width: 150px;
  margin-left: -80px;
  color: white;
  font-size: 14px;
}

.icon:hover ul {
  display: block;
  position: absolute;
}

@keyframes a1 {
  to {
    transform: rotate(360deg);
  }
}

@keyframes a2 {
  to {
    transform: rotate(-10800deg);
  }
}

@keyframes loadbac {
  0% {
    opacity: 0;
    margin-top: 100px;
  }

  100% {
    opacity: 1;
    margin-top: 50px;
  }
}
</style>
